<style>
	.page{
		padding-bottom: 0;
		background: #ffffff;
	}
	.p28{
		padding: 28upx 0;
	}
	.m-content image{
		width: 100%;
		height: 100%;
	}
	.m-title{
		display: flex;
		justify-content: center;
	}
	.m-title text{
		position: relative;
		color: #8a8a8a;
		font-size: 28upx;
		text-align: center;
	}
	.m-title text:after{
		content: '';
		position: absolute;
		top: 50%;
		left: -63upx;
		height: 1px;
		background: #acacac;
		width: 33upx;
	}
	.m-title text:before{
		content: '';
		position: absolute;
		top: 50%;
		right: -63upx;
		height: 1px;
		background: #acacac;
		width: 33upx;
	}
	.m-header{
		position: relative;
		width: 100%;
		height: 574upx;
		overflow: hidden;
		z-index: 1;
		display: inline-block;
	}
	.header-bg{
		width: 100%;
		height: 574upx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.header-bg image{
		width: 100%;
		height: 100%;
	}
	.header-title{
		font-size: 32upx;
		color: #ffffff;
		text-align: center;
		width: 100%;
	}
	.header-number{
		font-size: 76upx;
		color: #ffffff;
		width: 100%;
		text-align: center;
	}
	.header-apply{
		margin-top: 170upx;
		font-size: 70upx;
	}
	.m-take-list .item{
		margin-bottom: 32upx;
	}
	.m-take-list .top{
		width: 680upx;
		margin: 0 auto;
		background: linear-gradient(to bottom, #da201c, #ea625f);
		box-shadow:0px 9upx 43upx rgba(226,64,61,0.82);
		border-radius: 20upx;
		padding-top: 10upx;
		padding-bottom: 20upx;
		position: relative;
		z-index: 1;
	}
	.m-take-list .top .item-title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 606upx;
		margin: 0 auto;
		border-bottom: 1px solid rgba(255,255,255,0.5);
		height: 68upx;
	}
	.m-take-list .top .item-title view{
		opacity: 0.6;
		color: #ffffff;
		font-size: 28upx;
		line-height: 68upx;
		height: 68upx;
		overflow: hidden;
	}
	.m-take-list .top .item-cont{
		width: 606upx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 12upx;
		margin-bottom: 20upx;
	}
	.m-take-list .top .item-cont text{
		display: block;
		color: #ffffff;
		font-size: 28upx;
		width: 430upx;
	}
	.m-take-list .top .item-cont text.num{
		font-weight: bold;
		font-size: 40upx;
	}
	.m-take-list .top .item-cont .right{
		width: 111upx;
		height: 111upx;
		overflow: hidden;
		background: #f2f1f1;
		border-radius: 50%;
		border: 6upx solid #b11010;
	}
	.m-take-list .bottom{
		width: 630upx;
		height: 75upx;
		line-height: 55upx;
		background: #ffffff;
		border-radius: 10upx;
		color: #000000;
		font-size: 26upx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin: 0 auto;
		margin-top: -10upx;
		box-shadow:0upx 4upx 13upx rgba(55,55,55,0.09); 
		position: relative;
		z-index: 0;
		overflow: hidden;
	}
	.m-take-list .bottom .data{
		width: 28upx;
		height: 30upx;
		margin-right: 10upx;
		margin-bottom: 16upx;
	}
	.line-bg{
		background: #f2f1f1;
		width: 100%;
		height: 32upx;
	}
	.m-history-list .item{
		width: 678upx;
		margin: 0 auto;
		border: 2upx solid #f1f1f1;
		box-shadow:0upx 10upx 16upx rgba(216,216,216,0.21); 
		border-radius: 10upx;
		margin-bottom: 30upx;
	}
	.m-history-list .item .item-title{
		color: #757575;
		font-size: 28upx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin: 10upx 14upx;
		height: 38upx;
		line-height: 38upx;
		overflow: hidden;
	}
	.m-history-list .item .item-cont{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10upx 14upx;
	}
	.m-history-list .item .item-cont .left{
		display: flex;
		align-items: center;
	}
	.m-history-list .item .item-cont .left text{
		display: block;
		font-size: 30upx;
		color: #2f2f2f;
		width: 290upx;
	}
	.m-history-list .item .item-cont .left .num{
		font-size: 36upx;
	}
	.m-history-list .item .item-cont .img{
		width: 125upx;
		height: 125upx;
		margin-right: 20upx;
	}
	.m-history-list .item .item-cont .right{
		width: 169upx;
		height: 104upx;
	}
	.m-take-btn{
		width: 320upx;
		height: 90upx;
		line-height: 90upx;
		margin: 50upx auto;
		background: #d71511;
		line-height: 90upx;
		color: #ffffff;
		font-weight: bold;
		font-size: 36upx;
		box-shadow:0upx 0upx 16upx rgba(253,16,16,0.86); 
		text-align: center;
		border-radius: 50px;
	}
	.g-frame {
	    width: 600upx;
	    background: #fff;
	    border-radius: 20upx;
	    position: fixed;
	    top: 50%;
	    overflow: hidden;
	    left: 50%;
		margin-top: -255upx;
		margin-left: -300upx;
		z-index: 12;
	}
	
	.g-frame-mask {
	    background: #000;
	    opacity: .5;
	    height: 100vh;
	    width: 100%;
	    position: fixed;
	    top: 0upx;
		z-index: 11;
	}
	
	.m-frame-header {
	    height: 110upx;
	    width: 100%;
	    background: #d71311;
	    border-top-right-radius: 20upx;
	    border-top-left-radius: 20upx;
		position: relative;
		margin-bottom: 35upx;
	}
	.u-frame-title {
	    width: 100%;
	    text-align: center;
	    color: #fff;
	    line-height: 110upx;
	    font-size: 32upx;
	}
	
	.u-frame-close {
	    width: 42upx;
	    height: 42upx;
	    background-size: 100%;
	    position: absolute;
	    top: 50%;
		margin-top: -21upx;
	    right: 32upx;
	}
	.u-frame-cont{
		text-align: center;
		font-size: 34upx;
		padding-bottom: 35upx;
		line-height: 60upx;
		width: 550upx;
		margin: 0 auto;
	}
	.u-frame-cont text{
		display: block;
	}
	.m-frame-footer {
	    height: 100upx;
	    width: 100%;
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		margin-top: 20upx;
	}
	
	.m-frame-footer view {
		flex: 1;
	    line-height: 100upx;
	    text-align: center;
	    font-size: 32upx;
	}
	
	.u-reset {
	    color: #ff0000;
	    background: #fff;
	}
	
	.u-confirm {
	    background: #d71311;
	    color: #fff;
	    border-bottom-right-radius: 16upx;
	}
	.no-data{
		font-size: 28upx;
		text-align: center;
		width: 100%;
		padding: 20upx 0;
	}
	.zbDetail{
		color: #FFFFFF;
		font-size: 32upx;
		position: absolute;
		top: 5upx;
		right: 10upx;
	}
	
	
	.share-btn{
		text-align: center;
		color: #ffffff;
		width: 290upx;
		height: 70upx;
		line-height: 70upx;
		border: 3upx solid #ffffff;
		background: #d71511;
		border-radius: 50px;
		opacity: 1;
		margin: 0 auto;
		margin-top: 50upx;
		box-shadow:0px 0px 18px rgba(158,12,9,.26);
	}
	.m-agent{
		padding-bottom: 40rpx;
	}
	.m-agent .info{
		display: flex;
		align-items: flex-start;
		justify-content: center;
		position: relative;
	}
	.m-agent .info .item{
		flex: 1;
		position: relative;
	}
	.m-agent .info image{
		width: 94rpx;
		height: 94rpx;
		display: block;
		margin: 0 auto;
	}
	.m-agent .info .num{
		font-size: 36rpx;
		color: #2c2c2c;
		margin-top: 8rpx;
	}
	.m-agent .info .text{
		font-size: 28rpx;
		color: #9b9b9b;
	}
	.m-agent text{
		text-align: center;
		display: block;
	}
	.m-agent .transfer{
		position: absolute;
		z-index: 9;
		top: -14rpx;
		left: 50%;
		color: #FF0000;
		font-size: 30rpx;
		transform: translate(-200%,0%);
	}
	.m-agent .transfer image{
		width: 86rpx;
		height: 42rpx;
		display: block;
	}
	.m-agent .transfer text{
		background: linear-gradient(to right, #d32263, #e54a21);
		-webkit-background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
		text-fill-color: transparent;
	}
	.type-icon{
		padding-top: 120rpx;
	}
	.type-icon image{
		width: 118rpx;
		height: 43rpx;
		display: block;
		margin: 0 auto;
	}
	.btns{
		position: fixed;
		bottom: 18rpx;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #FFFFFF;
		padding-top: 20rpx;
		z-index: 999;
	}
	.btns .btn{
		width: 356rpx;
		height: 88rpx;
		color: #FFFFFF;
		font-size: 34rpx;
		text-align: center;
		line-height: 88rpx;
		border-radius: 10rpx;
		margin: 0 5rpx;
	}
	.btns .orderList{
		background-image: linear-gradient(to bottom, #f33030 , #f97878);
	}
	.btns .saveList{
		background-image: linear-gradient(to bottom, #fa5c2b , #ff976e);
	}
	.explain{
		border-top: 1px solid #E6E6E6;
		margin: 0 50rpx;
	}
	.explain .title{
		font-size: 32rpx;
		text-align: center;
		padding: 20rpx 0;
	}
</style>

<template>
	<view class="page">
		<view class="m-header">
			<view class="type-icon"><image src="../../../../static/icons/jewel/agent/agent_i5.png"></image></view>
			<view class="header-title">当前寄存粮仓</view>
			<view class="header-number">{{maker_num != 0?data.total_money:0}}</view>
			<!-- <navigator v-if="maker_num != 2" open-type="navigate" :url="'/pages/jewel/user/maker?maker_type=' + maker_num" class="share-btn">成为创客</navigator>
			<navigator v-else open-type="navigate" url="/pages/jewel/agent/user/allowance_list" class="share-btn">分享津贴</navigator> -->
			<view class="header-bg"><image src="../../../../static/images/maker_bg.png"></image></view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="zbDetail" @tap="zbDetail">明细</view>
			<!-- #endif -->
			
		</view>
		<view class="m-content">
			<view class="m-agent">
				<view class="info">
					<view class="transfer" @tap="transform()"><text>互转</text><image src="../../../../static/icons/agent_jewel/agent_i1.png"></image></view>
					<navigator open-type="navigate" class="item"><image src="../../../../static/icons/agent_jewel/agent_i4.png"></image></navigator>
					<navigator open-type="navigate" class="item"><image src="../../../../static/icons/agent_jewel/agent_i2.png"></image></navigator>
					<navigator open-type="navigate" url="/pages/jewel/agent_jewel/takecash" class="item"><image src="../../../../static/icons/agent_jewel/agent_i3.png"></image></navigator>
				</view>
				<view class="info">
					<navigator open-type="navigate" class="item"><text class="num">320</text><text class="text">已使用</text></navigator>
					<navigator open-type="navigate" class="item"><text class="num">320</text><text class="text">寄存</text></navigator>
					<navigator open-type="navigate" url="/pages/jewel/agent_jewel/takecash" class="item"><text class="num">320</text><text class="text">津贴</text></navigator>
				</view>
			</view>
			
			<!-- <view class="line-bg"></view>
			<view class="m-title p28"><text>珠宝提货</text></view>
			<view class="m-take-list" v-if="takeList.length != 0">
				<view class="item" v-for="(list, index) in takeList" :key="index">
					<view class="top">
						<view class="item-title"><view class="f-one-ellipsis">NO:{{list.order_no}}</view><view>{{list.addtime}}</view></view>
						<view class="item-cont" v-for="(item, idx) in list.jewelData" :key="idx">
							<view class="left"><text class="f-two-ellipsis">{{item.goods_name}}</text><text class="num">¥{{item.goods_amount}}</text></view>
							<view class="right"><image :src="item.thumb"></image></view>
						</view>
					</view>
					<view class="bottom"><image src="../../../../static/icons/icon_data.png" class="data"></image>还货日:{{list.return_time}}</view>
				</view>
			</view>
			<view class="no-data" v-else>暂无记录</view>
			<view class="m-title p28"><text>历史提货记录</text></view>
			<view class="m-history-list" v-if="historyList.length != 0">
				<view class="item" v-for="(list, index) in historyList" :key="index">
					<view class="item-title"><view class="f-one-ellipsis">NO:{{list.order_no}}</view><view>{{list.addtime}}</view></view>
					<view class="item-cont" v-for="(item, idx) in list.jewelData" :key="idx">
						<view class="left">
							<view class="img"><image :src="item.thumb"></image></view>
							<view class="text"><text class="f-one-ellipsis">{{item.goods_name}}</text><text class="num">¥{{item.goods_amount}}</text></view>	
						</view>
						<view class="right"><image src="../../../../static/icons/m_back.png" class="m-image"></image></view>
					</view>
				</view>
			</view>
			<view class="no-data" v-else>暂无记录</view> -->
		</view>
		<view class="explain">
			<view class="title">说明</view>
			<view class="cont">说明说明说明</view>
		</view>
		<view class="btns">
			<navigator open-type="navigate" url="" class="btn orderList" hover-class="none">订单列表</navigator>
			<navigator open-type="navigate" url="/pages/jewel/agent_jewel/saveOrder_view" class="btn saveList" hover-class="none">寄存列表</navigator>
		</view>
		<!-- <navigator open-type="navigate" :url="'/pages/jewel/agent/goods/categorys?maker_num=1'" class="m-take-btn" v-if="maker_num == 1 || maker_num == 2">我要珠宝提货啦</navigator>
		<navigator open-type="navigate" :url="'/pages/jewel/agent/goods/categorys?maker_num=' + maker_num" class="m-take-btn" v-if="maker_num == 3">先锋区</navigator>
		
		<view class="g-frame-mask" v-if="showPopup"></view>
		<view class="g-frame" v-if="showPopup">
			<view class="m-frame-header">
			    <view class="u-frame-title">提示</view>
			    <image class="u-frame-close" src="../../../../static/icons/ydt/close.png" mode="widthFix" @tap="togglePopup"></image>
			</view>
			<view class="u-frame-cont">
				<text>即将开放，请先联系珠宝客服微信：</text><text>haoyun001138</text>
				<view><text>或拨打财富热线：</text><text @tap="makeCall">4008-338-381</text></view>
			</view>
			<view class="m-frame-footer">
			    <view class="u-reset" @tap="togglePopup()">取消</view>
			    <view class="u-confirm" @tap="togglePopup()">确定</view>
			</view>
		</view> -->
		<view class="m-full-loading" v-if="showLoading">
		    <image src="../../../../static/images/loading.gif"></image>
		</view>
	</view>
</template>
<script>
	import henglang from '@/common/common_zb.js';
	export default {
		data() {
			return {
                showPopup: false,
				showLoading: false,
				data: [],
				maker_num:0,
			};
		},
        methods: {
			togglePopup() {
			    this.showPopup = !this.showPopup;
			},
			makeCall(){
				uni.makePhoneCall({
					phoneNumber:'4008-338-381'
				})
			},
			zbDetail(){
				uni.navigateTo({
					url:'/pages/jewel/order/bill?type=1'
				})
			},
			transform(){
				uni.navigateTo({
					url:'/pages/jewel/agent_jewel/transform'
				})
			}
        },
        onReady() {
			let that = this;
			that.showLoading = true;
			henglang.get('Maker/getInfo',{},true,function(res){
				if(res.data.code == 0){
					that.data = res.data.data
					that.maker_num = that.data.type
					uni.setNavigationBarTitle({
						title:that.data.type_text?that.data.type_text:'创客中心'
					})
				}
			});
			// henglang.get('pick/order_list',{type:5},true,function(res){
			// 	if(res.data.code == 0){
			// 		that.takeList = res.data.data;
			// 	}else{
			// 		henglang.showToast(res.data.msg)
			// 	}
			// })
			// henglang.get('pick/order_list',{type:6},true,function(res){
			// 	if(res.data.code == 0){
			// 		that.historyList = res.data.data;
			// 	}else{
			// 		henglang.showToast(res.data.msg)
			// 	}
			// })
			that.showLoading = false;
        },
		onNavigationBarButtonTap(e) {
		    if (e.index == 0) {
				uni.navigateTo({
					url:'/pages/jewel/order/bill?type=1'
				})
		    }
		}
	}
</script>

